<template>
    <page>
        <!-- 表单 -->
        <template #hd>
          <!-- label-width="80px" 输入框前面的文字保持一样的宽度 -->
            <el-form :model="form" class="demo-form-inline" label-width="80px">
                <el-row :gutter="20">
    <el-form-item label="用户名"  prop='name' style="width: 300px;">
      <!-- 查询不在对象中了拿了出来 -->
      <el-input v-model="name" />
    </el-form-item>
    <el-form-item label="手机号" style="width: 300px;">
      <el-input v-model="form.cellphone" />
    </el-form-item>
    <el-form-item label="订单号" style="width: 300px;">
      <el-input v-model="form.orderNumber" />
    </el-form-item>
    <el-form-item label="订单类型" style="width: 300px;">
      <el-select v-model="form.OrderTypes" placeholder="请选择类型">
        <el-option label="付款订单" value="1" />
        <el-option label="商品订单" value="2" />
        <el-option label="充值订单" value="3" />
        <el-option label="储存卡订单" value="4" />
        <el-option label="会员升级订单" value="5" />
      </el-select>
    </el-form-item>
</el-row>
<el-row :gutter="20">
    <el-form-item label="所属店铺" style="width: 300px;">
      <el-select v-model="form.shop" placeholder="请选择店铺">
        <el-option label="海口解放路店" value="1" />
          <el-option label="海口永万路店" value="2" />
          <el-option label="海口长彤路店" value="3" />
          <el-option label="海口国库路店" value="4" />
          <el-option label="海口国贸路店" value="5" />
          <el-option label="鑫隆商行" value="6" />
      </el-select>
    </el-form-item>
    <el-form-item label="订单状态" style="width: 300px;">
      <el-select v-model="form.paystate" placeholder="请选择状态">
        <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
          <el-option label="已取消" value="3" />
          <el-option label="待发货" value="4" />
          <el-option label="已发货" value="5" />
          <el-option label="已删除" value="6" />
          <el-option label="已退款" value="7" />
      </el-select>
    </el-form-item>
    <el-form-item label="支付状态" style="width: 300px;">
      <el-select v-model="form.orderStatus" placeholder="请选择状态">
        <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="配送状态" style="width: 300px;">
      <el-select v-model="form.mode" placeholder="请选择状态">
        <el-option label="自取" value="1" />
          <el-option label="配送" value="2" />
      </el-select>
    </el-form-item>
</el-row>
<el-row :gutter="20">
    <el-form-item label="下单时间">
      <el-col :span="11">
        <el-date-picker
          v-model="form.turnoverTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.turnoverTime"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="chaxun"><el-icon>
        <Search />
      </el-icon>查询</el-button>
      <el-button class="but"><el-icon>
        <Refresh />
      </el-icon>重置</el-button>
      <el-button class="but" @click="tan=true" >
        <el-icon>
        <Refresh />
      </el-icon>新增
    </el-button>
    </el-form-item>
</el-row>
  </el-form>
        </template>
        <!-- 列表 -->
        <template #ct>
            <el-table :data="lists" style="width: 100%">
                <el-table-column prop="orderNumber" label="id" width="120" />
    <el-table-column prop="cellphone" label="订单号" width="200" />
    <el-table-column prop="name" label="会员名称" width="120" v-model="name">
      </el-table-column>
    <el-table-column prop="OrderTypes" label="订单类型" width="120" >
        <template #default="{ row }" >
        {{ OrderTypes(row.OrderTypes) }}
      </template>
    </el-table-column>
    <el-table-column prop="shop" label="所属店铺" width="120" >
        <template #default="{ row }">
        {{ shop(row.shop) }}
      </template>
        </el-table-column>
    <el-table-column prop="money" label="总金额" width="120" />
    <el-table-column prop="paystate" label="支付状态" width="120" >
          <template #default="{ row }">
        {{ paystate(row.paystate) }}
      </template>
    </el-table-column>
    <el-table-column prop="orderStatus" label="订单状态" width="120" >
        <template #default="{ row }" style="color: #00acac;">
        {{ orderStatus(row.orderStatus) }}
      </template>
    </el-table-column>
    <el-table-column prop="mode" label="配送方式" width="120" >
        <template #default="{ row }">
        {{ mode(row.mode) }}
      </template>
    </el-table-column>
    <el-table-column prop="time" label="生成时间" width="200">
          <template #default="{ row }"> {{ formatTime(row.time) }}</template>
    </el-table-column>
    <el-table-column prop="discounts" label="支付金额" width="120" />
    <el-table-column prop="discounts" label="优惠金额" width="120" />
    <el-table-column prop="integral" label="积分金额" width="120" />
    <el-table-column prop="cellphone" label="手机号" width="160" />
    <el-table-column prop="turnoverTime" label="更新时间" width="200" >
      <template #default="{ row }"> {{ formatTime(row.turnoverTime) }}</template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="{ row }">
        <div class="sapn" >
            <span @click="openEdit( {...row} )"  style="color:#00acac ;"> <el-icon><Edit /></el-icon>修改</span>
            <span style="color:#00acac;">发货</span>
            <!-- 更多 -->
            <el-dropdown>
        <span class="el-dropdown-link"  style="color:#00acac ;"><el-icon><DArrowRight /></el-icon>更多</span>
        <template #dropdown>
          <el-dropdown-menu >
            <el-dropdown-item class="bg" ><el-icon><View /></el-icon>查看详情</el-dropdown-item>
            <el-dropdown-item class="bg"><el-icon><Memo /></el-icon>打印小票
            </el-dropdown-item>
            <el-dropdown-item class="bg"><el-icon><List /></el-icon>立即退款</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
          </div>
      </template>
    </el-table-column>
  </el-table>
       </template>
       <!-- 分页 -->
       <template #ft>
        <el-pagination
  background
  layout="total,prev, pager, next, sizes, next, jumper"
  :total="total"
  :default-page-size="limit"
  :current-page="page"
  @size-change="handeSizeChange"
  @current-change="handlePageChange"
/>
       </template>
    </page>
    <!-- 编辑 -->
    <el-dialog v-model="bian" title="新增信息" class="tanc">
    <el-form model="bianji" class="inline" ref="addfrom" label-width="100px" :rules="xiu">
    <el-form-item label="订单号" style="width: 300px;">
      <el-input v-model="bianji.orderNumber" />
    </el-form-item>
    <el-form-item label="订单总金额" style="width: 300px;" prop="money">
      <el-input v-model="bianji.money" />
    </el-form-item>
    <el-form-item label="优惠金额" style="width: 300px;">
      <el-input v-model="bianji.discounts" />
    </el-form-item>
    <el-form-item label="订单状态" style="width: 300px;">
      <el-select v-model="bianji.paystate" placeholder="请选择状态">
        <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
          <el-option label="已取消" value="3" />
          <el-option label="待发货" value="4" />
          <el-option label="已发货" value="5" />
          <el-option label="已删除" value="6" />
          <el-option label="已退款" value="7" />
      </el-select>
    </el-form-item>
    <el-form-item label="订单模式" style="width: 300px;">
      <el-select v-model="bianji.mode" placeholder="请选择状态">
        <el-option label="自取" value="1" />
          <el-option label="配送" value="2" />
      </el-select>
    </el-form-item>
<el-row>
  <el-form-item >
      <el-button type="primary" @click="handleEidt">确定</el-button>
      <el-button class="but" style="border: 1px solid gainsboro;"  @click="bian=false">取消</el-button>
    </el-form-item>
</el-row>
  </el-form>
  </el-dialog>
    <!-- 弹出新增 -->
<el-dialog v-model="tan" title="新增信息" class="tanc">
    <el-form :model="list" class="inline" ref="addfrom" label-width="80px" :rules="rules">
                <el-row :gutter="20" >
    <el-form-item label="用户名"  prop='name' style="width: 300px;">
      <el-input v-model="list.name" />
    </el-form-item>
    <el-form-item label="手机号" style="width: 300px;">
      <el-input v-model="list.cellphone" />
    </el-form-item>
    <el-form-item label="订单号" style="width: 300px;">
      <el-input v-model="list.orderNumber" />
    </el-form-item>
    <el-form-item label="类型" style="width: 300px;">
      <el-select v-model="list.OrderTypes" placeholder="请选择类型">
        <el-option label="付款订单" value="1" />
        <el-option label="商品订单" value="2" />
        <el-option label="充值订单" value="3" />
        <el-option label="储存卡订单" value="4" />
        <el-option label="会员升级订单" value="5" />
      </el-select>
    </el-form-item>
</el-row>
<el-row :gutter="20">
    <el-form-item label="所属店铺" style="width: 300px;">
      <el-select v-model="list.shop" placeholder="请选择店铺">
        <el-option label="海口解放路店" value="1" />
          <el-option label="海口永万路店" value="2" />
          <el-option label="海口长彤路店" value="3" />
          <el-option label="海口国库路店" value="4" />
          <el-option label="海口国贸路店" value="5" />
          <el-option label="鑫隆商行" value="6" />
      </el-select>
    </el-form-item>
    <el-form-item label="订单状态" style="width: 300px;">
      <el-select v-model="list.paystate" placeholder="请选择状态">
        <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
          <el-option label="已取消" value="3" />
          <el-option label="待发货" value="4" />
          <el-option label="已发货" value="5" />
          <el-option label="已删除" value="6" />
          <el-option label="已退款" value="7" />
      </el-select>
    </el-form-item>
    <el-form-item label="支付状态" style="width: 300px;">
      <el-select v-model="list.orderStatus" placeholder="请选择状态">
        <el-option label="待支付" value="1" />
          <el-option label="已支付" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="配送状态" style="width: 300px;">
      <el-select v-model="list.mode" placeholder="请选择状态">
        <el-option label="自取" value="1" />
          <el-option label="配送" value="2" />
      </el-select>
    </el-form-item>
</el-row>
<el-row :gutter="20">
    <el-form-item label="下单时间">
      <el-col :span="11">
        <el-date-picker
          v-model="list.turnoverTime"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="list.turnoverTime"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="生成时间">
      <el-col :span="11">
        <el-date-picker
          v-model="list.time"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="list.time"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="总金额"  prop='money' style="width: 300px;">
      <el-input v-model="list.money" />
    </el-form-item>
    <el-form-item label="支付金额"  prop='payment' style="width: 300px;">
      <el-input v-model="list.payment" />
    </el-form-item>
    <el-form-item label="优惠金额"  prop='discounts' style="width: 300px;">
      <el-input v-model="list.discounts" />
    </el-form-item>
    <el-form-item label="积分金额"  prop='integral' style="width: 300px;">
      <el-input v-model="list.integral" />
    </el-form-item>
</el-row>
<el-row>
  <el-button class="but" @click="tan=false">
        <el-icon>
        <Refresh />
      </el-icon>取消
    </el-button>
    <el-button class="but" @click="handleAdd">
        <el-icon>
        <Refresh />
      </el-icon>确定
    </el-button>
</el-row>
  </el-form>
  </el-dialog>
</template>

<script lang="ts" src="./list"></script>
<!-- 样式 -->
<style>
.demo-form-inline {
  background-color: gainsboro;
  border-radius: 10px;
  margin: 0 10px;
  padding-top: 10px;
  padding-left:10px
}
/* 表单字体颜色 */
.el-form-item__label {
  color: #606266;
  font-weight: 800;
  margin: 0;
  margin-left:10px;
  justify-content: none;
}
/* 按钮 */
.el-button {
    color: white;
  background-color: #00acac;
  border:0;
}
.el-button:hover{
    background-color: #00acac97;
}
.but{
    font-weight:100;
    color:#000;
  background-color:white;
}
.but:hover{
    color: #00acace3;
  background-color: #00acac3e;
}
/* 修改按钮 */
.sapn {
  display: flex;
  justify-content: space-between;
}
/* 分页的颜色 */
.el-pagination.is-background .el-pager li.is-active{
  color: white;
  background-color: #00acac;
}
/* 分页悬停 */
.el-pager li:hover{
  color: #00acac;
}
/* 弹窗颜色 */
.tanc {
  background-color: #00acac;
}
/* 表单 */
.inline {
  padding-top: 10px;
  background-color: white;
}
/* 更多的背景 */
.el-table{
  border: none;
}
</style>
